<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div class="layui-row">
    <div class="layui-col-md3">
    <ul class="layui-nav layui-nav-tree  layui-nav-side layui-bg-cyan" lay-filter="test">
         <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认展开</a>
          <dl class="layui-nav-child">
           <dd>
            <a href="javascript:;">选项1</a>
            <dl class="layui-nav-child">
                <dd>
                <a href="javascript:;">子选项1</a>
                </dd>
                <dd>
                <a href="javascript:;">子选项2</a>
                </dd>
            </dl>
           </dd>
           <dd>
            <a href="javascript:;">选项二</a>
           </dd>
           <dd>
            <a href="javascript:;">选项三</a>
           </dd>
           <dd>
            <a href="">跳转项</a>
           </dd>
          </dl> </li>
         <li class="layui-nav-item"> <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
           <dd>
            <a href="">移动模块</a>
           </dd>
           <dd>
            <a href="">后台模版</a>
           </dd>
           <dd>
            <a href="">电商平台</a>
           </dd>
          </dl> </li>
         <li class="layui-nav-item"><a href="">云市场</a></li>
         <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    </div>
    <div class="layui-col-md9">
    <table id="demo"></table>
    </div>

    </div>

    <script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
    <script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

      //监听导航点击
        element.on('nav(demo)', function(elem){
        //console.log(elem)
        layer.msg(elem.text());
        });
    });

    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: "#demo",
            height: 312,
            url: "/table/user/",
            page: true,
            cols:[[
                {field: "id", title: "ID", width: 80, sort: true, fixed: 'left'},
                {field: "user_name", title: "用户名", width: 80},
                {field: "age", title: "年龄", width: 80, sort:true}
            ]]
        });
    })
    </script>

</body>
</html>



